<template>
	<view class="content">
		<view v-if="arr.length>0">
			<view v-for="(it,i) in arr" :key="i" class="coupon-list">
				<view class="coupon-bg" :class="it.type != 0 ? 'gray' : ''">
					<!-- width="700" height="222" -->
					<image  style="width: 700rpx;height: 222rpx;" src="https://syxiyi.oss-cn-shenzhen.aliyuncs.com/frontend/img/yhq_bg.png"></image>
				</view>
				
				<view class="coupon-text"  @click="goUse(it)">
					<view class="coupon-left">
						<view style="color: white;">
							<text style="font-size: 38rpx;">￥</text>
							<text style="font-size: 67rpx;">{{it.cut_price}}</text>
						</view>
						<view style="color: #FFFFFF;font-size: 24rpx;padding-top: 20rpx;">
							优惠券
						</view>
					</view>
					<view class="oupon-right">
						<view class="two-line" style="color: #0D0D0D;font-size: 30rpx;font-weight: 600;width: 260rpx">
							{{it.title}}
						</view>
						<view style="font-size: 22rpx;color: #969696;padding-top: 30rpx;">
							有效时间：{{it.end_time}}
						</view>
						<view class="coupon-tip one-line" v-if="it.name == '平台'">({{it.name}}优惠券)</view>
						<view class="coupon-tip one-line" v-else>(仅{{it.name}}可用)</view>
						<!-- <view class="coupon-tip one-line" v-else>(仅测试店铺测试店铺测试店铺测试店铺测试店铺使用)</view> -->
					</view>
					<view class="but">
						<view :class="it.type  == 1 ? 'yishiyong' : it.type  == 0 ? 'weishiyong' : it.type == 2 ? 'yishiyong' : ''">
							{{ it.type  == 1 ? '已使用' : it.type  == 0 ? '立即使用' : it.type == 2 ? '已过期' : ''}}
						</view>
					</view>
				</view>
			</view>
			<view class="finished">—— 没有更多了 ——</view>
		</view>
		<view class="zanwu-data" v-else>暂无数据</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				arr:[],
				page: 1,
				total: false,
				store_id: ''
			}
		},
		onLoad(options) {
			this.store_id = options.store_id
		},
		onShow() {
			let loginstatus = uni.getStorageSync('token');
			if(loginstatus)
			{
				this.getCoupons()
			}
			
		},
		onReachBottom() {
			if (this.total) return false
			this.page++
			this.getCoupons()
		},
		methods: {
			getCoupons() {
				this.$ajaxRequest.get(this.baseUrl + 'shop/coupon/info', {
					page: this.page,
					size: 10,
				}, true).then(res => {
					if (res.data.code == 200) {
						if (this.page == 1) {
							this.arr = res.data.data
						} else {
							this.arr.push.apply(this.arr, res.data.data)
							if (res.data.data.length < 10) return this.total = true
						}
					} else {
						uni.showToast({
							title:res.data.msg,
							icon:'none'
						})
					}
				})
			},
			// 去使用
			goUse(it) {
				if (it.type == 0) {
					if (it.store_id == this.store_id || it.store_id == 0) {
						uni.navigateTo({
							url:'/pages/vip/index'
						})
					} else {
						uni.showModal({
							title:'不可用',
							content:'该优惠券仅' + it.name + '可用',
							success() {
								
							}
						})
					}
				}
			}
		}
	}
</script>

<style>
	.gray {
		-webkit-filter: grayscale(100%);
		-moz-filter: grayscale(100%);
		-ms-filter: grayscale(100%);
		-o-filter: grayscale(100%);
		filter: grayscale(100%);
		filter: gray;
	}
	.content{
		padding-left: 25rpx;
	}
	.coupon-list{
		margin-top: 20rpx;
		position: relative;
		width: 700rpx;
		height: 222rpx;
	}
	.coupon-bg{
		position: absolute;
	}
	.coupon-text{
		display: flex;
		align-items: center;
		position: relative;
		z-index: 1;
	}
	.coupon-left{
		height: 222rpx;
		width: 202rpx;
		display: flex;
		align-items: center;
		justify-content: center;
		flex-direction: column;
	}
	.oupon-right {
		display: flex;
		flex-direction: column;
		justify-content: center;
		width: 488rpx;
		height: 202rpx;
		box-sizing: border-box;
		padding-left: 40rpx;
	}
	.but{
		position: absolute;
		z-index: 1;
		right: 30rpx;
	}
	.yishiyong{
		color: white;
		text-align: center;
		line-height: 61rpx;
		/* width:160rpx;
		height:61rpx;
		background:rgba(224,224,224,1); */
		border-radius:31rpx;
		font-size: 24rpx;
		font-weight: 600;
		color: #999;
	}
	.weishiyong{
		color: white;
		text-align: center;
		width:160rpx;
		height:61rpx;
		line-height: 61rpx;
		background:linear-gradient(-85deg,rgba(255,114,59,1) 0%,rgba(255,147,68,1) 100%);
		border-radius:31rpx;
		font-size: 24rpx;
		font-weight: 600;
	}
	.coupon-tip {
		/* width: 500rpx; */
		font-size: 22rpx;
		color: #969696;
		padding-top: 10rpx;
		padding-right: 10rpx;
	}
</style>
